<template>
	<div class="home">
		<!-- 首页轮播 -->
		<home-swipe :carouselItems="carouselItems"></home-swipe>

		<!-- 首页功能快捷入口 Grid宫格-->
		<home-enter></home-enter>

		<!-- 商品推荐 -->
		<home-product :productItems="recommendedItems" title="商品推荐"></home-product>

		<!-- 新品上架 -->
		<home-product :productItems="newArrialItems" title="新品上架"></home-product>

		<!-- 销售排行 -->
		<home-product :productItems="topSaleItems" title="销售排行"></home-product>

	</div>
</template>

<script>
	//导入封装后的首页接口
	import * as HomeAPI from "@/api/home.js"

	import HomeSwipe from "./components/HomeSwipe.vue"
	import HomeEnter from "./components/HomeEnter.vue"
	import HomeProduct from "./components/HomeProduct.vue"

	export default {
		name: 'home',
		components: {
			HomeSwipe,
			HomeEnter,
			HomeProduct
		},

		data() {
			return {
				carouselItems: [], //轮播图
				recommendedItems: [], //商品推荐		
				newArrialItems: [], //新品上架		
				topSaleItems: [], //销售排行		
			}
		},

		// 生命周期钩子-实例创建后,可以用this.*
		created() {
			//2.使用封装后的接口
			HomeAPI.getHomeDataAPI().then(result => {
				console.log(result); //控制台调式输出
				this.carouselItems = result.data.carouselItems; //保存API调用的返回的轮播数据			
				this.recommendedItems = result.data.recommendedItems; //保存首页商品推荐数据
				this.newArrialItems = result.data.newArrialItems; //保存首页新品上架	数据
				this.topSaleItems = result.data.topSaleItems; //保存首页销售排行数据				
			});
		},
	}
</script>
	<style lang="less" scoped>
  .goods-block {
    background-color: #f7f7f7;
 
    .van-cell {
      font-size: 16px;
      background-color: #DCDEE0;
    }
 
    .goods_item {
      display: flex;
      flex-direction: column;
      margin: 8px;
      padding: 5px;
      background-color: white;
      border-radius: 10px;
      font-size: 14px;      
      .price {
          font-size: 18px;
          color: red;
          font-weight: bold;
          text-align: right;
          padding-right: 10px;  
      }
    }
  }
</style>
